<template>
  <div class="message-test">
    <UserLayout>
      <div class="test-container">
        <el-card class="test-card">
          <template #header>
            <div class="card-header">
              <span>消息系统测试</span>
            </div>
          </template>

          <div class="test-sections">
            <!-- 消息中心测试 -->
            <div class="test-section">
              <h3>消息中心</h3>
              <p>测试消息列表、消息详情、回复等功能</p>
              <el-button type="primary" @click="goToMessageCenter">
                进入消息中心
              </el-button>
            </div>

            <el-divider />

            <!-- 聊天窗口测试 -->
            <div class="test-section">
              <h3>聊天功能</h3>
              <p>测试实时聊天功能</p>
              <el-button type="success" @click="openChatWindow">
                打开聊天窗口
              </el-button>
            </div>

            <el-divider />

            <!-- 模拟消息测试 -->
            <div class="test-section">
              <h3>模拟消息</h3>
              <p>生成测试消息数据</p>
              <div class="button-group">
                <el-button @click="generateSystemMessage">
                  生成系统消息
                </el-button>
                <el-button @click="generateUserMessage">
                  生成用户消息
                </el-button>
                <el-button @click="generateChatMessage">
                  生成聊天消息
                </el-button>
              </div>
            </div>

            <el-divider />

            <!-- 消息通知测试 -->
            <div class="test-section">
              <h3>消息通知</h3>
              <p>测试顶部消息通知功能</p>
              <el-button type="warning" @click="simulateNewMessage">
                模拟新消息
              </el-button>
            </div>
          </div>
        </el-card>

        <!-- 聊天窗口对话框 -->
        <el-dialog
          v-model="showChatDialog"
          title="聊天测试"
          width="800px"
          :before-close="closeChatDialog"
        >
          <ChatWindow
            v-if="showChatDialog"
            :chat-user="testChatUser"
            :current-user="currentUser"
            @close="closeChatDialog"
            @send-message="handleSendMessage"
          />
        </el-dialog>
      </div>
    </UserLayout>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import UserLayout from '@/components/layout/UserLayout.vue'
import ChatWindow from '@/components/message/ChatWindow.vue'

// 路由
const router = useRouter()

// 响应式数据
const showChatDialog = ref(false)

// 测试用户数据
const currentUser = reactive({
  id: 1,
  name: '张三',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})

const testChatUser = reactive({
  id: 2,
  name: '李四',
  avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  isOnline: true
})

// 方法
const goToMessageCenter = () => {
  router.push('/messages')
}

const openChatWindow = () => {
  showChatDialog.value = true
}

const closeChatDialog = () => {
  showChatDialog.value = false
}

const handleSendMessage = (message) => {
  console.log('发送消息:', message)
  ElMessage.success('消息发送成功')
}

const generateSystemMessage = () => {
  // 模拟生成系统消息
  const systemMessages = [
    {
      type: 'system',
      subType: 'audit',
      title: '房源审核通知',
      content: '您发布的房源"阳光小区三室两厅"已通过审核，现在可以正常展示给租客了。',
      extraData: {
        houseId: '12345',
        status: '审核通过',
        operator: '管理员',
        operateTime: new Date().toISOString()
      }
    },
    {
      type: 'system',
      subType: 'contract',
      title: '合同签署提醒',
      content: '租客张三已同意租赁合同，请及时确认并完成签署。',
      extraData: {
        contractId: 'CT001',
        amount: '3000元/月',
        status: '待房东确认'
      }
    },
    {
      type: 'system',
      subType: 'payment',
      title: '租金到账通知',
      content: '您收到来自租客的租金支付，金额3000元。',
      extraData: {
        amount: '3000元',
        status: '已到账'
      }
    }
  ]
  
  const randomMessage = systemMessages[Math.floor(Math.random() * systemMessages.length)]
  console.log('生成系统消息:', randomMessage)
  ElMessage.success('系统消息已生成，请查看消息中心')
}

const generateUserMessage = () => {
  // 模拟生成用户消息
  const userMessages = [
    {
      type: 'user',
      senderId: 2,
      senderName: '李四',
      title: '关于房源咨询',
      content: '您好，我对您发布的阳光小区房源很感兴趣，请问可以约个时间看房吗？我的联系方式是13800138000。'
    },
    {
      type: 'user',
      senderId: 3,
      senderName: '王五',
      title: '租房申请',
      content: '我想申请租赁您的房源，我是在职员工，收入稳定，可以提供相关证明材料。'
    },
    {
      type: 'user',
      senderId: 4,
      senderName: '赵六',
      title: '房源问题咨询',
      content: '请问这个房源的水电费是怎么算的？包含物业费吗？周边交通方便吗？'
    }
  ]
  
  const randomMessage = userMessages[Math.floor(Math.random() * userMessages.length)]
  console.log('生成用户消息:', randomMessage)
  ElMessage.success('用户消息已生成，请查看消息中心')
}

const generateChatMessage = () => {
  // 模拟生成聊天消息
  ElMessage.success('聊天消息已生成，请打开聊天窗口查看')
}

const simulateNewMessage = () => {
  // 模拟新消息通知
  ElMessage({
    message: '您有新的消息，请查看消息中心',
    type: 'info',
    duration: 3000,
    showClose: true
  })
}
</script>

<style scoped>
.message-test {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.test-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  color: #2c3e50;
}

.test-sections {
  padding: 20px 0;
}

.test-section {
  margin-bottom: 20px;
}

.test-section h3 {
  margin-bottom: 10px;
  color: #409eff;
  font-size: 16px;
}

.test-section p {
  margin-bottom: 15px;
  color: #606266;
  font-size: 14px;
}

.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

:deep(.el-dialog__body) {
  padding: 0;
}
</style>
